<template>
  <div id="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      data: [],
      name: [],
      toplist: [],
      value: []
    }
  },
  props: ['dcdlist'],
  watch: {
    dcdlist: function (newVal, oldVal) {
      this.array = newVal
      this.getDHT1()
    }
  },
  methods: {
    // 懂车帝全部数据
    getDHT1() {
      this.array.forEach(element => {
        const i = this.data.findIndex(item => {
          return item.name === element.pinpai
        })
        if (i !== -1) {
          this.data[i].value++
        } else {
          this.data.push({ name: element.pinpai, value: 1 })
        }
      })
      // 冒泡排序
      const len = this.data.length
      let i
      let j
      let tmp
      for (i = 0; i < len; i++) {
        for (j = len - 1; j > i; j--) {
          // 后一项对比前一项当后比前大的时候调换位置
          if (this.data[j].value > this.data[j - 1].value) {
            tmp = this.data[j - 1]
            this.data[j - 1] = this.data[j]
            this.data[j] = tmp
          }
        }
      }
      // 只取前十新增
      this.toplist = this.data.splice(0, 10)
      // name数组
      this.name = this.toplist.map(item => item.name)
      this.value = this.toplist.map(item => item.value)
      this.renderline()
    },
    renderline() {
      const myPieChart = echarts.init(document.getElementById('main'))
      const value = this.value
      const name = this.name
      const pieOption = {
        // 鼠标移入的提示
        tooltip: {
          trigger: 'axis'
        },
        // 网格
        grid: {
          top: '5%',
          right: '4%',
          bottom: '3%',
          left: '3%',
          // show: true, // 显示网格的边框
          containLabel: true // 网格包括坐标轴的文字
          // borderColor: '#012f4a'
        },
        xAxis: {
          type: 'value',
          // 去除轴线
          axisLine: {
            show: false
          },
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false
          },
          // 文字调整
          axisLabel: {
            // color: '#4c9bfd'
            show: false // x轴文字颜色
          },
          splitLine: {
            show: false
          },
          // 两边的留白策略
          boundaryGap: false
        },
        yAxis: {
          type: 'category',
          data: name.reverse(),
          // 去除轴线
          axisLine: {
            show: false
          },
          // 文字调整
          axisLabel: {
            color: '#4c9bfd' // x轴文字颜色
          },
          // 不显示刻度
          axisTick: {
            show: false
          },
          // Y轴分割线（图表中的哪些横线）
          splitLine: {
            show: false
          }
        },
        // 图例（图例和series中的数据有关系，保证series中的数据有 name 才行）
        // legend: {
        //   textStyle: {
        //     color: '#4c9bfd' // 图例文字颜色
        //   },
        //   right: '45%' // 距离右边10%
        // },
        color: ['#ed3f35'],
        series: [
          // 下面的一个对象，表示一条线
          {
            name: '车源量',
            barMinHeight: 4, // 最小柱高
            barWidth: 10, // 柱宽度
            barMaxWidth: 10, // 最大柱宽度
            data: value.reverse(),
            type: 'bar',
            // 线条的拐点平滑过度
            // smooth: true
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'right', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#4c9bfd',
                    fontSize: 14
                  }
                }
              }
            }
          }
        ]
      }

      myPieChart.setOption(pieOption)
    }
  }
}
</script>
<style lang="less" scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>
